<template>
  <div style="pointer-events: all">
    <el-dialog
      title=""
      :visible="showDialog"
      width="60%"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      top="90px"
      :show-close="false"
    >
      <div class="bj_dialog">
        <div class="close" @click="showDialogFn"></div>
        <div class="titleBox">
          <div class="title">{{ data.department && data.department.name }}</div>
          <div style="display: flex">
            <div class="itemRight">
              <div class="titleInfo">
                <div class="border"></div>
                人员信息
              </div>
              <div class="info">
                所长：<span>{{
                  data.department && data.department.leaderLabel
                }}</span>
                所员：<span
                  class="realname"
                  v-for="(i, index) in memberName"
                  :key="index"
                  >{{ i.realname }}</span
                >
              </div>
            </div>
            <div class="itemRight">
              <div class="titleInfo">
                <div class="border"></div>
                所实际支出
              </div>
              <div class="info">所实际支出：<span>{{data.department &&data.expenses}}元</span></div>
            </div>
            <div class="itemRight">
              <div class="titleInfo">
                <div class="border"></div>
                业主评分
              </div>
              <div class="rate">
                <el-rate
                  v-model="rateValue"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </div>
            </div>
          </div>
        </div>
        <div class="tabsStyle">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane name="first"
              ><span slot="label"
                ><i class="el-icon-s-management"></i>项目</span
              >
              <div class="info">
                进行中项目：<span style="color: #f4b815">{{ jxz }}个</span>
                已完成项目：<span style="color: #1cc9ff"
                  >{{ completed }}个</span
                >
              </div>
              <el-form
                ref="form"
                :model="form"
                :label-width="$px2rem('90px')"
                :inline="true"
              >
                <el-form-item label="项目进度 :">
                  <el-select
                    v-model="form.projectStatus"
                    placeholder="全部"
                    :style="{ width: $px2rem('192px') }"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.value + ''"
                      v-for="(item, index) in typeData"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目名称 :">
                  <el-input
                    v-model.trim="form.projectName"
                    placeholder="请输入项目名称"
                  />
                </el-form-item>
                <el-form-item class="btn_container">
                  <div class="btn" @click="onSubmit">
                    <img
                      src="../../assets/dashboard/middle/search.png"
                      alt=""
                    />查询
                  </div>
                  <div class="btn" @click="resetForm">
                    <img
                      src="../../assets/dashboard/middle/reset.png"
                      alt=""
                    />重置
                  </div>
                </el-form-item>
              </el-form>
              <div class="tableTitle">项目列表</div>
              <div class="tableStyle">
                <el-table :data="tableData" stripe style="width: 100%">
                  <el-table-column prop="name" label="项目名称">
                  </el-table-column>
                  <el-table-column
                    prop="projectSchedule"
                    align="center"
                    label="项目进度"
                  >
                    <template slot-scope="scope">
                      <span
                        :style="{
                          color:
                            scope.row.projectSchedule == 9
                              ? '#1CC9FF'
                              : '#F4B815',
                        }"
                      >
                        {{
                          scope.row.projectSchedule | projectProgress(typeData)
                        }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="proLeadaer_dictText"
                    label="项目负责人"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="proprietorId_dictText"
                    label="业主"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="projectPosition_dictText"
                    label="项目地点"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="projectAmount"
                    label="合同金额"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="deptdeptRevenue"
                    label="所实收金额"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="preCompDate"
                    label="预计完成时间"
                    align="center"
                    min-width="100"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page.pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next"
                  :total="page.total"
                  popper-class="select_bottom"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second"
              ><span slot="label"><i class="el-icon-s-order"></i>任务</span>
              <task-list
                ref="taskList"
                :id="data.department && data.department.id"
              ></task-list>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { getPoliceList, getPointList } from "@/api/dashboard";
// import { policeTypeArr } from "@/utils/enumeration";
import { getDictItemListByCode } from "@/api/system";
import { suoProjectList } from "@/api/dashborad";
import taskList from "@/views/dashboard/component/taskList.vue";
export default {
  name: "bj-dialog",
  components: { taskList },
  props: {
    // label: "title",
    // expandTrigger: "hover",
    data: {
      type: Object,
      require: true,
      default: () => {},
    },
    memberName: {
      type: Array,
      require: true,
      default: () => [],
    },
    timeEd: {
      type: String,
      default: "",
    },
    timeSt: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      rateValue: 5,
      activeName: "first",
      completed: 0,
      jxz: 0,
      areaOptions: [],
      currentPage: 1,
      showDialog: false,
      states: [],
      options: [],
      value: [],
      list: [],
      form: {
        projectStatus: "",
        projectName: "",
      },
      typeData: [],
      page: {
        total: 0,
        pageNo: 1,
        pageSize: 10,
      },
      pointPosNameData: [],
      tableData: [],
    };
  },
  filters: {
    projectProgress(jd, typeData) {
      let obj = typeData.find((item) => item.value == jd);
      if (obj) return obj.label;
      return "--";
    },
  },
  created() {},
  watch: {
    showDialog(val) {
      if (val) {
        this.projectMes();
        this.getSuoProjectList();
        this.projectProgressDefective("internal_project_progress");
      } else {
        this.$refs.taskList.statisticsDataSource = [];
      }
    },
    data: {
      handler: function (data) {
        if (data.department && data.department.id) {
          this.$nextTick(() => {
            this.$refs.taskList.suoTaskList();
          });
        }
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    // 获取字典值-项目进度类型
    async projectProgressDefective(dictCode) {
      const res = await getDictItemListByCode({ dictCode });
      this.typeData = (res.result || []).map((x) => {
        return {
          label: x.itemText,
          value: x.itemValue,
        };
      });
    },
    // 项目信息
    projectMes() {
      if (!this.data.projectCnt) return;
      let completedArr = this.data.projectCnt.filter(
        (x) => x.project_schedule == 9
      );
      this.completed = completedArr.reduce(
        (all, el) => all + el["count(project_schedule)"],
        0
      );
      let jxzArr = this.data.projectCnt.filter((x) => x.project_schedule != 9);
      this.jxz = jxzArr.reduce(
        (all, el) => all + el["count(project_schedule)"],
        0
      );
    },
    showDialogFn() {
      this.showDialog = false;
      this.form = {
        projectName: "",
        projectStatus: "",
      };
      this.$refs.form.resetFields();
      // this.getSuoProjectList()
    },
    async getSuoProjectList() {
      const res = await suoProjectList(this.data.department.id, {
        createTimeEd: this.timeEd,
        createTimeSt: this.timeSt,
        projectSchedule: this.form.projectStatus,
        name: this.form.projectName,
        ...this.page,
      });
      this.tableData = res.result.records;
      this.page.total = res.result.total;
      console.log(res, "-------");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getSuoProjectList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNo = val;
      this.getSuoProjectList();
    },
    resetForm() {
      // this.$refs.form.resetFields()
      this.form = {
        projectName: "",
        projectStatus: "",
      };
      this.$refs.form.resetFields();
      this.getSuoProjectList()
    },
    onSubmit() {
      console.log(this.form);
      this.getSuoProjectList();
    },
  },
};
</script>
<style lang="scss" scoped>
.bj_dialog {
  width: 100%;
  height: 100%;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 18px;
  padding: 0px 50px;
  .titleBox {
    position: relative;
    top: -45px;
    margin-top: 20px;
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 25px;
    }
    .itemRight {
      margin-right: 86px;
      .titleInfo {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #1cc9ff;
        //border-left: 2px #58F3FF solid;
        //padding-left: 3px;
        .border {
          width: 2px;
          height: 12px;
          background: #1cc9ff;
          margin-right: 4px;
        }
      }
      .rate {
        margin-top: 8px;
      }
      .info {
        margin-top: 8px;
        font-size: 14px;
        margin-left: 6px;
        color: #b8bcbf;
        .realname {
          //margin-left: 23px;
          margin-right: 16px;
        }
        span {
          color: #ffffff;
          margin-right: 24px;
        }
      }
    }
  }
  .tabsStyle {
    margin-top: -25px;
    .info {
      font-size: 14px;
      color: #b8bcbf;
      margin-bottom: 13px;
      span {
        color: #ffffff;
        margin-right: 30px;
      }
    }
    ::v-deep .el-tabs__item {
      font-size: 16px !important;
      padding: 0 24px;
      font-weight: bold;
      color: #48ddff;
      &:focus {
        background: #00465f;
        box-shadow: inset 0px 0px 12px 0px #00d3ff;
        border: 1px solid #18c3ff;
      }
    }
    ::v-deep el-tabs__active-bar {
      background-color: transparent !important;
    }
    ::v-deep.el-tabs__item:last-child::after {
      margin-left: 5px;
    }
    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: 1px solid #239ac4;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
      height: 33px;
      line-height: 33px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      position: static !important;
      //background-color: #3abcf3 !important;
      //height: 1px;
    }
    //::v-deep .el-tabs__active-bar {
    //  background-color: #31d9fa !important;
    //  height: 3px;
    //}
  }
  .close {
    position: absolute;
    right: 0px;
    top: 20px;
    width: 70px;
    height: 70px;
    cursor: pointer;
  }
  .btn_container {
    //display: flex;
    margin-left: 20px;
    .btn {
      display: inline-block;
      height: 32px;
      padding: 0 15px;
      line-height: 32px;
      border-radius: 4px;
      margin-right: 10px;
      font-size: 16px;
      background: rgba(35, 193, 255, 0.1);
      box-shadow: inset 0px 1px 20px 0px rgba(35, 193, 255, 0.5);
      border: 1px solid rgba(35, 193, 255, 0.5);
      color: #fff;
      img {
        width: 16px;
        height: 16px;
        margin-bottom: 2px;
        margin-right: 2px;
        vertical-align: middle;
      }
    }
    .btn:active,
    .btn:hover {
      background: rgba(35, 193, 255, 0.1);
      box-shadow: inset 0px 1px 20px 0px #23c1ff;
      border-radius: 4px;
      border: 1px solid #23c1ff;
      margin-right: 10px;
    }
  }
  .tableTitle {
    color: #48ddff;
    font-size: 18px;
    height: 35px;
    padding-left: 24px;
    line-height: 38px;
    //background-color: #022537;
    margin-bottom: 3px;
    margin-top: -10px;
    //border-top: 1px solid #147582;
    background: url("../../assets/dashboard/middle/project_list.png") no-repeat;
    background-size: 100% 100%;
  }
  .tableStyle {
    ::v-deep .el-table__body-wrapper {
      height: 360px !important;
      overflow-y: scroll;
    }

    ::v-deep .el-table__header {
      //height: 60px;
    }
    // 表格内背景颜色
    ::v-deep .el-table th {
      background-color: #001c32 !important;
      border: 0px;
    }
    //去除表头的下标线；
    ::v-deep .el-table th.is-leaf {
      border-bottom: none;
    }
    // 表格内背景颜色
    ::v-deep .el-table tr,
    ::v-deep .el-table td {
      background-color: #033247; // 背景透明
      border: 0px;
      color: #fff; // 修改字体颜色
      //font-size: 24px;
      //height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }

    ::v-deep
      .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background-color: #001c32;
    }
    ::v-deep .el-table th.el-table__cell > .cell {
      padding-left: 25px;
    }
    ::v-deep .el-table .cell {
      padding-left: 25px;
    }
    .el-table::before {
      background-color: transparent !important;
    }
    ::v-deep .el-table {
      box-shadow: inset 0px 1px 21px 0px rgba(35, 193, 255, 0.2);
      border: 1px solid rgba(35, 193, 255, 0.5);
    }
  }
}
::v-deep .el-table tbody tr:hover > td {
  background-color: #03638d !important;
  //color: #0ef2ec;
}
::v-deep .el-dialog {
  width: 1450px !important;
  height: 850px;
  margin-top: 100px !important;
  background: url("../../assets/dashboard/dialog_bc.png") no-repeat;
  background-size: 100% 100%;
  z-index: 99;
}
::v-deep .el-dialog__body {
  height: calc(100% - 42px);
}
::v-deep .el-form-item__label {
  color: #8db2b7;
  font-size: 14px;
  padding-right: -5px;
}
::v-deep .el-form-item__content {
  width: unset;
}
/*右侧图标样式  \e790下箭头图标*/
::v-deep .el-select .el-input .el-select__caret.el-input__icon::before {
  content: "\e790";
  color: #23c1ff;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}
::v-deep .el-input__inner,
.el-textarea__inner {
  height: 32px;
  font-size: 14px;
  background: rgba(35, 193, 255, 0.1);
  box-shadow: inset 0px 1px 21px 0px rgba(87, 236, 255, 0.2);
  border-radius: 4px;
  border: 1px solid #23c1ff;
  color: #fff;
}

::v-deep .el-date-editor .el-range-input {
  font-size: 14px;
  background: unset;
  color: #fff;
}

::v-deep .el-date-editor .el-range-separator {
  color: #abb2b7;
  width: 20px;
  margin-right: 10px;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: unset;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 0;
}

::v-deep .el-select .el-input .el-select__caret {
  color: #fff;
}

::v-deep .el-select-dropdown {
  margin: 0px;
  border: 0px;
  background: #082b3d;
  border: 1px solid #23f3ff80;
  //border-top:unset ;
  box-shadow: inset 0 1px 21px 0 #57ecff33;
  border-radius: 4px;
}

::v-deep .el-select-dropdown__item {
  background-color: transparent;
  color: #fff;
}
//鼠标经过的时候下拉框高亮
//::v-deep .el-select-dropdown__item.hover,
//.el-select-dropdown__item:hover {
//  color: #409eff;
//}

::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}

::v-deep .el-pagination__total {
  color: #fff;
}

::v-deep .el-pager li {
  border: 1px solid #33e9ff;
  border-radius: 6px;
  background-color: unset;
  color: #fff;
  margin-right: 5px;

  &.active {
    background: #009ff5;
  }
}

::v-deep .el-pagination .btn-next,
.el-pagination .btn-prev {
  background: #00ffbe1a;
  border: 1px solid #33e9ff;
  box-shadow: inset 0 0 8px 0 #12c2be;
  border-radius: 4px;
  color: #fff;
}

::v-deep .el-pagination button:disabled {
  background: rgba(0, 214, 255, 0.1);
  box-shadow: inset 0px 0px 8px 0px #12a7c2;
  border-radius: 4px;
  border: 1px solid #23c1ff;
  color: #fff;
}

::v-deep .el-pagination .btn-prev {
  background: rgba(0, 214, 255, 0.1);
  box-shadow: inset 0px 0px 8px 0px #12a7c2;
  border-radius: 4px;
  border: 1px solid #23c1ff;
  color: #fff;
  margin-right: 5px;
}

.pagination {
  float: right;
  margin: 10px 0;
}

::v-deep .el-cascader-menu {
  background: #082b3d !important;
  border: 1px solid #23f3ff80;
  //border-top:unset ;
  box-shadow: inset 0 1px 21px 0 #57ecff33;
  border-radius: 4px;
}
>>> .el-cascader-panel {
  background-color: #000;
}
</style>
<style lang="scss">
.select_bottom {
  .el-select-dropdown__wrap.el-scrollbar__wrap {
    margin: 0px;
    //border: 0px;
    border-radius: 0px;
    background: #082b3d;
    border: 1px solid #23f3ff80 !important;
    //border-top:unset ;
    box-shadow: inset 0 1px 21px 0 #57ecff33;
    border-radius: 4px;
  }
  .el-select-dropdown__item {
    color: #fff !important;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #0ef2ec;
    color: #0079ff;
  }
}
</style>
